<template>
	<view class="blind-list">
		<view class="goods-list-item" v-for="item,index in list" :key="index" @click="toDetail(item)">
			<view class="goods-list-item-img"><image class="_list-item-img noSaveImg" :src="item.img" mode="" lazy-load></image></view>
			<view class="goods-list-item-info">
				<view class="goods-list-item-info-title single-line"><text>{{item.name}}</text></view>
				<view class="goods-list-item-info-option">
					<view class="goods-list-item-info-option-l">
						<text class="goods-list-item-info-tag">{{item.level}}</text>
						<text class="goods-list-item-info-num">
							<text class="goods-list-item-info-num-title">剩余</text>
							<text class="goods-list-item-info-num-text">{{item.currentNum}}份</text>
						</text>
					</view>
					<view class="goods-list-item-info-option-r"><text>￥{{item.price}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"collection-list",
		data() {
			return {
				
			};
		},
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		methods:{
			toDetail(item) {
				uni.navigateTo({
					url:`/pages/collectionDetail/collectionDetail?collectionId=${item.collectionId}`
				})
			}
		}
	}
</script>

<style lang="less">
	.blind-list{
		width: 100%;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
	}
	.goods-list-item{
		width: 100%;
		height: 878rpx;
		background: #262A34;
		border-radius: 40rpx;
		margin-top: 24rpx;
		.goods-list-item-img{
			width: 100%;
			height: 686rpx;
			._list-item-img{
				width: 100%;
				height: 100%;
				border-radius: 40rpx;
			}
		}
		.goods-list-item-info{
			padding: 32rpx 48rpx 0;
			box-sizing: border-box;
			.goods-list-item-info-title{
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.goods-list-item-info-option{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				margin-top: 8rpx;
				.goods-list-item-info-option-l{
					display: flex;
					flex-wrap: nowrap;
					justify-content: flex-start;
					align-items: center;
					.goods-list-item-info-tag{
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						padding: 8rpx 20rpx;
						background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
						border-radius: 25rpx;
					}
					.goods-list-item-info-num{
						margin-left: 16rpx;
						.goods-list-item-info-num-title{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							padding: 8rpx 20rpx;
							background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
							border-top-left-radius: 25rpx;
							border-bottom-left-radius: 25rpx;
							display: inline-block;
						}
						.goods-list-item-info-num-text{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							padding: 8rpx 20rpx;
							background: #3C4456;
							border-top-right-radius: 25rpx;
							border-bottom-right-radius: 25rpx;
							display: inline-block;
						}
					}
				}
				.goods-list-item-info-option-r{
					font-size: 36rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 48rpx;
				}
			}
		}
	}
</style>
